<template>
  <div class="detail">
    <div class="breadcrumb-area">
      <div class="content">
        <div class="breadcrumb">
          <a href="/">首页</a>
          <a class="active">页面组件</a>
        </div>
        <div class="title">轮播组件1</div>
      </div>
    </div>
    <div class="demo">
      <Banner
        :bk="isOpen"
        :bannerData="bannerData"
        :hotBanner="hotBanner"
        :categoryData="categoryData"
        @on-click-banner="clickBanner"
        @on-click-hot-banner="clickHotBanner"
        @on-click-category="clickCategory"
        @on-click-product="clickProduct"
      />
      <div>
        <span style="margin-right: 10px">开启背景随图片模糊切换：</span>
        <i-switch size="large" v-model="isOpen">
          <span slot="open">开启</span>
          <span slot="close">关闭</span>
        </i-switch>
      </div>
    </div>
    <div class="product-desc">
      <div class="container">
        <div class="attribute">
          <div class="title">概述</div>
          <p>
            常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现
          </p>
        </div>
        <div class="attribute">
          <div class="title">文件代码路径</div>
          <p>
            src/views/materials/component/component1/Banner.vue
          </p>
        </div>
        <div class="attribute">
          <div class="title">依赖</div>
          <p>
            view-design
          </p>
        </div>
        <div class="attribute">
          <div class="title">Props</div>
          <p>
            <Table
            :columns="props"
            :data="data1"
            border
            width="1000"
          ></Table>
          </p>
        </div>
        <div class="attribute">
          <div class="title">Events</div>
          <p>
            <Table
              :columns="events"
              :data="data2"
              border
              width="1000"
            ></Table>
          </p>
        </div>
        <div class="attribute">
          <div class="title">数据结构</div>
          <p>仅展示必要字段，可根据需求自行添加其他字段数据</p>
          <b>
            bannerData：轮播图数据
          </b>
          <vue-json-pretty :data="dataDemo1" />
          <b>
            hotBanner：轮播图下方快捷入口数据
          </b>
          <vue-json-pretty :data="dataDemo2" />
          <b>
            categoryData：左侧分类栏数据
          </b>
          <vue-json-pretty :data="dataDemo3" />
        </div>
      </div>
    </div>
    <Action />
  </div>
</template>

<script>
import VueJsonPretty from "vue-json-pretty";
import { props, events, methods } from "@/libs/columns";
import Banner from "./Banner.vue";
import Action from "@/views/detail/Action.vue";
export default {
  name: "component",
  components: { Banner, Action, VueJsonPretty },
  data() {
    return {
      props: props,
      events: events,
      methods: methods,
      isOpen: false,
      bannerData: [
        {
          title: "轮播图1",
          picUrl: require("@/assets/demo/banner1.png"),
        },
        {
          title: "轮播图2",
          picUrl: require("@/assets/demo/banner2.png"),
        },
        {
          title: "轮播图3",
          picUrl: require("@/assets/demo/banner3.png"),
        },
      ],
      hotBanner: [
        {
          title: "Web前端攻城狮",
          desc: "互联网时代最火爆的技术",
          picUrl: require("@/assets/demo/web.png"),
        },
        {
          title: "Java攻城狮",
          desc: "综合就业排名第一",
          picUrl: require("@/assets/demo/java.png"),
        },
        {
          title: "Android攻城狮",
          desc: "移动设备市场份额第一",
          picUrl: require("@/assets/demo/android.png"),
        },
        {
          title: "PHP攻城狮",
          desc: "世界上最好的语言: )",
          picUrl: require("@/assets/demo/php.png"),
        },
        {
          title: "IOS攻城狮",
          desc: "可能是全球最好用的系统",
          picUrl: require("@/assets/demo/ios.png"),
        },
      ],
      categoryData: [
        {
          title: "前沿 / 区块链 / 人工智能",
          children: [
            {
              title: "微服务",
            },
            {
              title: "区块链",
            },
            {
              title: "人工智能",
            },
          ],
          recommend: [
            {
              title: "前端进阶：响应式开发与常用框架",
              price: 658,
              sales: 1258,
              picUrl: require("@/assets/demo/class1.png"),
            },
            {
              title: "前端框架及项目面试 聚焦Vue3/React/Webpack",
              price: 658,
              sales: 1180,
              picUrl: require("@/assets/demo/class2.png"),
            },
            {
              title: "React16+React-Router4 从零打造企业级电商后台管理系统",
              price: 268,
              sales: 1328,
              picUrl: require("@/assets/demo/class3.png"),
            },
          ],
        },
        {
          title: "前端 / 小程序 / JS",
          children: [
            {
              title: "HTML/CSS",
            },
            {
              title: "JavaScript",
            },
            {
              title: "Vue.js",
            },
          ],
          recommend: [
            {
              title: "从网页搭建入门Java Web",
              price: 568,
              sales: 975,
              picUrl: require("@/assets/demo/class4.png"),
            },
            {
              title: "Java并发编程与高并发解决方案",
              price: 299,
              sales: 1913,
              picUrl: require("@/assets/demo/class5.png"),
            },
            {
              title: "Google资深工程师深度讲解Go语言",
              price: 399,
              sales: 1082,
              picUrl: require("@/assets/demo/class6.png"),
            },
          ],
        },
      ],
      data1: [
        {
          name: "bk",
          desc: "是否开启背景跟随轮播图片模糊效果",
          type: "Boolean",
          value: "false",
        },
        {
          name: "color",
          desc: "主题颜色",
          type: "String",
          value: "#F20D0D",
        },
        {
          name: "bannerData",
          desc: "轮播图数据，详见下方数据结构说明",
          type: "Array",
          value: "[ ]",
        },
        {
          name: "hotBanner",
          desc: "轮播图下方快捷入口数据，详见下方数据结构说明",
          type: "Array",
          value: "[ ]",
        },
        {
          name: "categoryData",
          desc: "左侧分类栏数据，详见下方数据结构说明",
          type: "Array",
          value: "[ ]",
        },
      ],
      data2: [
        {
          name: "on-click-banner",
          type: "轮播图点击事件",
          value: "当前点击项数据",
        },
        {
          name: "on-click-hot-banner",
          type: "轮播图下方快捷入口点击事件",
          value: "当前点击项数据",
        },
        {
          name: "on-click-category",
          type: "二级分类点击事件",
          value: "当前点击项数据",
        },
        {
          name: "on-click-product",
          type: "分类面板中推荐产品点击事件",
          value: "当前点击项数据",
        },
      ],
      dataDemo1: [
        {
          picUrl: "图片链接，图片大小像素比例 937*316 px",
        },
        {
          picUrl: "https://z3.ax1x.com/2021/04/17/ch3wFA.png",
        },
      ],
      dataDemo2: [
        {
          title: "标题",
          desc: "描述",
          picUrl: "图片链接，图片大小像素比例 36*36 px",
        },
        {
          title: "Java攻城狮",
          desc: "综合就业排名第一",
          picUrl: "https://s1.ax1x.com/2018/10/23/irETwF.png",
        },
      ],
      dataDemo3: [
        {
          title: "一级分类标题",
          children: [
            {
              title: "二级分类标题",
            },
            {
              title: "区块链",
            },
          ],
          recommend: [
            {
              title: "二级分类中推荐产品标题",
              price: "价格",
              sales: "销量",
              picUrl: "推荐产品图片链接，图片大小像素比例 64*42 px",
            },
            {
              title: "前端框架及项目面试 聚焦Vue3/React/Webpack",
              price: 658,
              sales: 1180,
              picUrl: "https://z3.ax1x.com/2021/04/17/ch3Xk9.png",
            },
          ],
        },
      ],
    };
  },
  methods: {
    clickBanner(v) {
      this.$Message.info("点击了" + v.title);
    },
    clickHotBanner(v) {
      this.$Message.info("点击了" + v.title);
    },
    clickCategory(v) {
      this.$Message.info("点击了" + v.title);
    },
    clickProduct(v) {
      this.$Message.info("点击了" + v.title);
    },
  },
  mounted() {},
};
</script>

<style scoped lang="less">
@import "@/views/detail/detail.less";
.demo {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fff;
  height: 600px;
}
</style>
